<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form-model
        ref="formModel"
        :model="form"
        layout="inline"
        :rules="{
          name: [
            {
              validator: validators.noWhitespace(),
              trigger: 'change',
            },
            {
              validator: validators.noIllegalString(),
              trigger: 'change',
            },
            {
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'change',
            },
          ],
        }"
      >
        <a-row
          :gutter="[16, 16]"
          type="flex"
          justify="end"
        >
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-model-item
              prop="name"
              label="服务器名称"
            >
              <a-input
                autocomplete="off"
                v-model="form.name"
              />
            </a-form-model-item>
          </a-col>
          <a-col
            :md="6"
            :sm="8"
          >
            <a-form-model-item label="数据中心">
              <a-select
                :getPopupContainer="
                triggerNode => {
                  return triggerNode.parentNode || document.body;
                }"
                v-model="form.datacenterId"
              >
                <a-select-option
                  v-for="d in datacenterList"
                  :key="d.id"
                  :value="d.id"
                >
                  {{ d.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <span
            style="float: left; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col
              :md="12"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="loadData(true)"
                icon="search"
              >
                查询
              </a-button>
              <a-button
                @click="resetSearchForm"
                icon="reload"
                style="margin-left: 8px"
              >
                重置
              </a-button>
            </a-col>
          </span>
        </a-row>
      </a-form-model>
    </div>
    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span
        slot="sortCol"
        slot-scope="text, record, index"
      >
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
        <span
          slot="resultCol"
          slot-scope="text, record"
        >
          <span
            style="color: green"
            v-if="record.costScore >= 60 && record.deviceScore >= 60"
          >
            推荐
          </span>
          <span
            style="color: red"
            v-else
          > 不推荐 </span>
        </span>
        <span
          slot="scoreProgress"
          slot-scope="text"
        >
          <a-progress
            status="active"
            :percent="text"
            :format="percent => `${percent}`"
          />
        </span>
        <span
          slot="ratioProgress"
          slot-scope="text"
        >
          <a-progress
            status="active"
            :percent="Math.floor(text * 100)"
            :format="percent => `${percent}%`"
          />
        </span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a @click="handleDetail(record)">指标查看</a>
          <!-- <a-divider type="vertical" />
        <a @click="handleDetail(record)">详情</a> -->
        </span>
    </a-table>
    <!-- <detail-modal ref="detailModal" @ok="loadData"></detail-modal> -->
  </a-card>
</template>

<script>
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { gPostAction } from "@/api/manage";
  // import DetailModal from "./modules/DetailModal"
  // import ConfigModal from './modules/ConfigModal'

  export default {
    name: "F010409",
    mixins: [GwListMixin],
    components: {
      // DetailModal,
      // ConfigModal,
    },
    data() {
      return {
        // 表头
        columns: [
          {
            title: "序号",
            dataIndex: "",
            key: "rowIndex",
            width: 50,
            scopedSlots: { customRender: "sortCol" },
          },
          {
            title: "服务器名称",
            dataIndex: "name",
          },
          {
            title: "数据中心",
            dataIndex: "datacenterName",
          },
          {
            title: "最优成本评分",
            dataIndex: "costScore",
            scopedSlots: { customRender: "scoreProgress" },
          },
          {
            title: "最优设备评分",
            dataIndex: "deviceScore",
            scopedSlots: { customRender: "scoreProgress" },
          },
          {
            title: "服务器能耗转换率",
            dataIndex: "energyEfficiencyRatio",
            scopedSlots: { customRender: "ratioProgress" },
          },
          {
            title: "推荐意见",
            dataIndex: "result",
            scopedSlots: { customRender: "resultCol" },
          },
          // {
          //   title: "操作",
          //   dataIndex: "action",
          //   align: "center",
          //   scopedSlots: { customRender: "action" },
          // },
        ],
        form: {
          name: "",
          datacenterId: "",
        },
        datacenterList: [],
        url: {
          list: "/model/pageDeviceScore",
          datacenterList: "/asset/pageDatacenter",
        },
      };
    },
    mounted() {
      this.loadDatacenter();
      this.loadData();
    },
    methods: {
      loadData(isDoSearch) {
        this.$refs.formModel.validate((error) => {
          if (!error) {
            return;
          }
          this.gQueryParam.deviceName = this.form.name;
          this.gQueryParam.title = "精确管控与供电制冷联动-统一管理联动平台-资源动态分配";
          this.gQueryParam.content = "查询资源动态分配列表";
          this.gQueryParam.datacenterId = this.form.datacenterId;
          this.gQueryParam.modelType = "OPTIMAL_COST";
          if (isDoSearch) {
            this.gQueryParam.pageNo = 1;
            this.gPagination.current = 1;
          }
          gPostAction(this.url.list, this.gQueryParam).then((res) => {
            const data = res.data;
            if (data && data.list) {
              this.gDataSource = data.list;
              this.gPagination.total = data.totalCount;
            }
          });
        });
      },
      loadDatacenter() {
        gPostAction(this.url.datacenterList, {}).then((res) => {
          const data = res.data;
          if (data && data.list) {
            this.datacenterList = data.list;
            this.datacenterList.unshift({ id: '', name: '全部' });
          }
        });
      },
      handleDetail(data) {
        this.$refs.detailModal.showModal(data);
      },
      handleConfig(data) {
        this.$refs.configModal.config(data);
      },
      resetSearchForm() {
        this.form.datacenterId = "";
        this.form.name = "";
        this.$refs.formModel.resetFields();
      },
    },
  };
</script>
<style scoped>
</style>